<template>
  <div>
  <!-- 集装箱信息 -->
  <el-dialog
    :title="dialogType + '集装箱信息'"
    :visible.sync="dialogVisible"
    :before-close="closedialog"
    width="800"
    append-to-body
    :close-on-click-modal="false"
  >
    <div>
      <el-form
        ref="formData"
        :model="form"
        :rules="rules"
        label-width="148px"
        label-suffix=":"
        size="mini"
        class="flex-form bill-form"
      >
        <el-form-item label="集装箱(器)编号" prop="contaId">
          <el-input
            v-model.trim="form.contaId"
            placeholder="请输入集装箱(器)编号"
          />
        </el-form-item>
        <el-form-item label="重箱或者空箱标识" prop="contaLoadedType">
          <el-select v-model.trim="form.contaLoadedType" placeholder="请输入重箱或者空箱标识">
            <el-option v-for="(item, index) in dict.type.mft_conta_laod_type" :key="index" :label="item.value+'-'+item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集装箱(器)尺寸类型" prop="contaSizeType">
          <el-select v-model.trim="form.contaSizeType" placeholder="请输入集装箱(器)尺寸类型">
            <el-option v-for="(item, index) in dict.type.mft_conta_size_type" :key="index" :label="item.value+'-'+item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集装箱(器)来源代码" prop="contaSuppId">
         <el-select v-model.trim="form.contaSuppId" placeholder="请输入集装箱(器)来源代码">
           <el-option v-for="(item, index) in dict.type.mft_conta_supp_type" :key="index" :label="item.value+'-'+item.label"
             :value="item.value"></el-option>
         </el-select>
        </el-form-item>
        <el-form-item label="集装箱(器)自重(㎏)" prop="contaWt">
          <el-input-number
          v-model="form.contaWt"
          size="mini"
          :min="0"
          placeholder="请输入集装箱(器)自重(㎏)"
          controls-position="right"
        ></el-input-number>
        </el-form-item>
        <el-form-item label="集装箱封志信息" prop="sealList">
          <el-button type="primary" plain class="input-btn" icon="el-icon-plus" @click="handleContaSeal"
            >添加({{ form.sealList.length }})</el-button
          >
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button
            type="success"
            plain
            @click="addForm"
            size="mini"
            >添加集装箱(器)编号</el-button
          >
        </el-form-item>
      </el-form>

      <basic-table
        ref="tableList"
        :columns="columns"
        :tableData="tableData"
        :needPagination="false"
      >
        <template #contaLoadedType="scope">
             <dict-tag :options="dict.type.mft_conta_laod_type" :value="scope.row.contaLoadedType"/>
        </template>
        <template #contaSizeType="scope">
             <dict-tag :options="dict.type.mft_conta_size_type" :value="scope.row.contaSizeType"/>
        </template>
        <template #contaSuppId="scope">
             <dict-tag :options="dict.type.mft_conta_supp_type" :value="scope.row.contaSuppId"/>
        </template>


        <template #operate="scope">
          <div class="option-menu">
            <el-button
              type="text"
              size="mini"
              class="table-edit"
              @click="handleDelete(scope.index, tableData)"
              v-hasPermi="['system:costStopConfig:delete']"
            >
              移除
            </el-button>
          </div>
        </template>
      </basic-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitForm('formData')"
        size="small"
        v-if="dialogType != 'detail'"
        >确定</el-button
      >
      <el-button @click="closedialog('formData')" size="small">取消</el-button>
    </span>
  </el-dialog>
   <contaseal-info ref="contaSealInfo" @submitSealInfo="submitSealInfo" :sealList="form.sealList"></contaseal-info>
</div>

</template>

<script>
import contasealInfo from "./contasealInfo.vue";
export default {
  name: "containerInfo",
  dicts:['mft_conta_laod_type','mft_conta_size_type','mft_conta_supp_type'],
  components: {
    contasealInfo
  },
  props: {
    mftContaList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          prop: "contaId",
          label: "集装箱(器)编号",
          align: "center",
        },
        {
          prop: "contaLoadedType",
          label: "重箱或者空箱标识",
          align: "center",
          slot:true
        },
        {
          prop: "contaSizeType",
          label: "集装箱(器)尺寸类型",
          align: "center",
           slot:true
        },
        {
          prop: "contaSuppId",
          label: "集装箱(器)来源代码",
          align: "center",
          slot:true
        },
        {
          prop: "contaWt",
          label: "集装箱(器)自重(㎏)",
          align: "center",
        },
        {
          prop: "operate",
          label: "操作",
          slot: true,
          width: 150,
          fixed: "right",
        },
      ],
      dialogVisible: false,
      dialogType: "新增",
      editIndex: null,
      form: {
        contaId: null,
        contaLoadedType: null,
        contaSizeType: null,
        contaSuppId: null,
        contaWt: null,
        sealList:[]
      },
      rules: {
        contaId: [
          {
            required: true,
            message: "集装箱(器)编号不能为空",
            trigger: "blur",
          },
        ],
        contaLoadedType:[
          {
            required: true,
            message: "集装箱(器)编号不能为空",
            trigger: "blur",
          },
        ],
       contaWt: [
          {
            required: true,
            message: "集装箱(器)重箱重量不能为空",
            trigger: "blur",
          },
        ],
        contaSizeType: [
           {
             required: true,
             message: "集装箱(器)尺寸类型不能为空",
             trigger: "blur",
           },
         ],
    contaSuppId:[
          {
            required: true,
            message: "集装箱(器)来源不能为空",
            trigger: "blur",
          },
        ],

      },
    };
  },
  methods: {
    initForm() {
      this.form = {
        contaId: null,
        contaLoadedType: null,
        contaSizeType: null,
        contaSuppId: null,
        contaWt: null,
        sealList:[]
      };
    },
    handleAdd() {
      this.initForm();
      this.dialogType = "新增";
      this.tableData.push(this.form);
    },
    open() {
      this.initForm();
      this.dialogVisible = true;
      if(this.mftContaList.length > 0) {
        this.tableData = this.mftContaList;
      }
    },
    closedialog() {
      this.$refs["formData"].resetFields();
      this.tableData = [];
      this.dialogVisible = false;
    },
    handleDelete(index, rows) {
      rows.splice(index, 1);
    },
    //添加集装箱封志信息
    handleContaSeal(){
      this.$refs.contaSealInfo.open();
    },
    addForm() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          let list = this.tableData.map(item => item.contaId);
          if(list.indexOf(this.form.contaId) != -1) {
            this.$message.warning("该集装箱(器)编号已存在!")
            return;
          }
          this.tableData.push(this.form);
          this.dialogType == "新增";
          this.initForm();
        }
      });
    },
    // editForm() {
    //   this.$refs["formData"].validate((valid) => {
    //     if (valid) {
    //       console.log(this.tableData[this.editIndex]);
    //       console.log(this.form);
    //       this.tableData.splice(this.editIndex, 1, this.form);
    //       this.dialogType = "新增";
    //       this.initForm();
    //     }
    //   });
    // },
    submitForm() {
      if(this.tableData.length==0){
        this.$message.warning("集装箱(器)为空!")
        return;
      }
      this.$emit("submitContainerInfo", this.tableData);
      this.closedialog();
    },
    // 集装箱封志信息提交
    submitSealInfo(val) {
      this.form.sealList = val;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-empty {
  padding: 0;
}
::v-deep .el-empty__image {
  width: 80px !important;
}
::v-deep .el-empty__description {
  margin-top: 0;
  p {
    font-size: 12px;
  }
}
::v-deep .el-table {
  th {
    background-color: #ECF5FF;
    color: #333;
  }
}
</style>
